<template>
    <view class="container">
        <block v-if="isload">
            <form @submit="formSubmit" @reset="formReset">
                <view class="form">
                    <view class="form-item">
                        <text class="label input-required">姓名：</text>
                        <input type="text" class="input" placeholder="请输入姓名" name="name" :value="userinfo.bankcarduser" placeholder-style="color:#BBBBBB;font-size:28rpx"/>
                    </view>
                    <view class="form-item">
                        <text class="label">手机号码：</text>
                        <input type="text" class="input" placeholder="请输入手机号码" name="call" :value="userinfo.bankcardnum" placeholder-style="color:#BBBBBB;font-size:28rpx"/>
                    </view>
                    <view class="form-item" style="border-bottom: none;height:90rpx;line-height:90rpx;">
                        <text class="label input-required">从事的行业：</text>
                    </view>
                    <view class="industry-box">
                        <view class="industry-list" v-for="(item,index) in industryList" :key="item.id" @click="menuindex = index">
                            <view class="radio-group-img">
                                <image
                                    v-if="menuindex == index"
                                    class="radio-group-img2"
                                    src="../../static/userset/group-o.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    v-if="menuindex != index"
                                    class="radio-group-img2"
                                    src="../../static/userset/group-f.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    style="width: 100%;border-radius: 8rpx;"
                                    src="../../static/userset/top1.png"
                                    mode="widthFix"
                                />
                            </view>
                            <view class="text-center text-df" style="height: 40rpx;line-height: 40rpx;margin-bottom: 10rpx;;margin-top: -4rpx;">
                                {{item.name}}
                            </view>
                        </view>
                    </view>
                    <view class="form-item">
                        <text class="label">店铺/公司名称：</text>
                        <input type="text" class="input" placeholder="请输入公司名称" name="call" :value="userinfo.bankcardnum" placeholder-style="color:#BBBBBB;font-size:28rpx"/>
                    </view>
                    <view class="form-item" style="border-bottom: none;">
                        <text>您比较关注的品类（可以多选）：</text>
                    </view>
                    <view class="industry-box">
                        <view class="industry-list" v-for="(item,index) in industryList" :key="item.id" @click="selectLk(item.id)">
                            <view class="radio-group-img">
                                <image
                                    v-if="lkList.includes(item.id)"
                                    class="radio-group-img2"
                                    src="../../static/userset/group-o.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    v-if="!lkList.includes(item.id)"
                                    class="radio-group-img2"
                                    src="../../static/userset/group-f.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    style="width: 100%;border-radius: 8rpx;"
                                    src="../../static/userset/top1.png"
                                    mode="widthFix"
                                />
                            </view>
                            <view class="text-center text-df" style="height: 40rpx;line-height: 40rpx;margin-bottom: 10rpx;;margin-top: -4rpx;">
                                {{item.name}}
                            </view>
                        </view>
                    </view>

                    <view class="form-item">
                        <text class="label">省市区</text>
                        <input type="text" class="input" placeholder="请输入公司名称" name="call" :value="userinfo.bankcardnum" placeholder-style="color:#BBBBBB;font-size:28rpx"/>
                    </view>
                    <view class="form-item">
                        <text class="label">详细地址：</text>
                        <input type="text" class="input" placeholder="请输入详细地址" name="call" :value="userinfo.bankcardnum" placeholder-style="color:#BBBBBB;font-size:28rpx"/>
                    </view>
                </view>
                <button class="set-btn" form-type="submit">保 存</button>
            </form>
        </block>
        <loading v-if="loading"></loading>
        <dp-tabbar :opt="opt"></dp-tabbar>
        <popmsg ref="popmsg"></popmsg>
    </view>
</template>

<script>
    var app = getApp();
    export default {
      data() {
        return {
            opt:{},
            loading:false,
            isload: false,
            menuindex:-1,
            lkList:[],
            banklist: ['工商银行', '农业银行', '中国银行', '建设银行', '招商银行', '邮储银行', '交通银行', '浦发银行', '民生银行', '兴业银行', '平安银行', '中信银行', '华夏银行', '广发银行', '光大银行', '北京银行', '宁波银行'],
            bankname: '',
            userinfo:{},
            textset:{},
        };
      },
      computed: {
        industryList() {
            return [
                {id:1, img:'../../static/userset/top1.png', name:'超时便利店'},
                {id:2, img:'../../static/userset/top1.png', name:'果蔬生鲜店'},
                {id:3, img:'../../static/userset/top1.png', name:'企事业单位'},
                {id:4, img:'../../static/userset/top1.png', name:'二批商户'},
                {id:5, img:'../../static/userset/top1.png', name:'社区团购'},
                {id:6, img:'../../static/userset/top1.png', name:'其他'},
            ]
        }
      },

        onLoad: function (opt) {
            this.opt = app.getopts(opt);
            this.isload = true
        },
        onPullDownRefresh: function () {
        },
        methods: {
            getdata: function () {
                var that = this;
                that.loading = true;
                app.get('ApiMy/set', {}, function (data) {
                    that.loading = false;
                    that.userinfo = data.userinfo;
                    that.bankname = data.userinfo.bankname;
                    that.loaded();
                });
            },
            selectLk(e) {
                const {lkList} = this
                const n = lkList.findIndex(n => n == e )
                if(n>=0) {
                    this.lkList.splice(n, 1);
                }else{
                    this.lkList.push(e)
                }
            },
            formSubmit: function (e) {
            var formdata = e.detail.value;
                var bankname = this.bankname
                var bankcarduser = formdata.bankcarduser
                var bankcardnum = formdata.bankcardnum
                var bankaddress = formdata.bankaddress
            if (bankname == '') {
                app.alert('请选择开户行');return;
            }
                    app.showLoading('提交中');
            app.post("ApiMy/setfield", {bankname:bankname,bankaddress:bankaddress,bankcarduser:bankcarduser,bankcardnum:bankcardnum}, function (data) {
                        app.showLoading(false);
                if (data.status == 1) {
                app.success(data.msg);
                setTimeout(function () {
                    app.goback(true);
                }, 1000);
                } else {
                app.error(data.msg);
                }
            });
            },
            bindBanknameChange: function (e) {
            this.bankname = this.banklist[e.detail.value];
            },
        }
    };
</script>

<style lang="scss">
    @import "/main.css";
    .form{ width:94%;margin:20rpx 3%;border-radius:5px;padding:20rpx 20rpx;padding: 0 3%;background: #FFF;}
    .form-item{display:flex;align-items:center;width:100%;border-bottom: 1px #ededed solid;height:98rpx;line-height:98rpx;}
    .form-item:last-child{border:0}
    .form-item .label{color: #000;width:200rpx;}
    .form-item .input{flex:1;color: #000;}
    .form-item .picker{height: 60rpx;line-height:60rpx;margin-left: 0;flex:1;color: #000;}
    .set-btn{width: 90%;margin:60rpx 5%;height:96rpx;line-height:96rpx;border-radius:48rpx;color:#FFFFFF;font-weight:bold;}
    .industry-box{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-around;
        border-bottom: 1rpx #ededed solid;
    }
    .industry-list{
        width: 25%;
        margin-right: 7%;
    }
    .radio-group-img{
        position: relative;
    }
    .radio-group-img2{
        background-color: white;
        border: 1rpx solid white;
        border-radius: 50%;
        position: absolute;
        right: 12rpx;
        top: 12rpx;
        width: 32rpx;
        height: 32rpx;
        z-index: 1;
    }
</style>